<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="bs-panel">
			<div class="bs-filter flex">
				<div class="fil-label">办案中心类型：</div>
				<div class="flex_bd">
					<el-radio-group v-model="styleV" size="small" @change="change">
						<el-radio v-for="(item,index) in filstyles" v-show="index < filshow" :key="index"
							:label="item.value" border>{{item.title}}</el-radio>
					</el-radio-group>
				</div>
				<div class="fil-select" @click="filToggle">
					<div v-if="filshow == 10"><span>展开</span><span class="el-icon-arrow-down"></span></div>
					<div v-else><span>收起</span><span class="el-icon-arrow-up"></span></div>
				</div>
			</div>
			<div class="bs-filter flex-center">
				<div class="fil-label">其他选项：</div>
				<div class="flex_bd flex-center fil-form">
					<el-form size="small" :inline="true" ref="form" :model="form">
						<el-form-item label="作者">
							<el-select v-model="form.author" placeholder="请选择">
								<el-option label="不限" value="1"></el-option>
								<el-option label="区域一" value="2"></el-option>
								<el-option label="区域二" value="3"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="好评度">
							<el-select v-model="form.raty" placeholder="请选择">
								<el-option label="不限" value="1"></el-option>
								<el-option label="区域一" value="2"></el-option>
								<el-option label="区域二" value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</div>
				<div class="fil-button">
					<el-button size="small" type="primary">查询</el-button>
					<el-button size="small" type="default">清空</el-button>
				</div>
			</div>
		</div>
		<!-- 数据 -->
		<div class="handle-cells">
			<ul class="handle-data clear">
				<li v-for="(item,index) in handleData" :key="index">
					<div class="hl-card" @click="dataTab(index)" :class="dataActive == index?'active':''">
						<img :src="item.icon" >
						<div class="text">{{item.text}}</div>
						<div class="value">{{item.value}}</div>
					</div>
				</li>
			</ul>
		</div>
		<!-- 统计 -->
		<div class="handle-cells">
			<el-row :gutter="16">
				<el-col :span="12">
					<div class="ana-card flex-center">
						<div class="ana-left">
							<div class="an-icon"><img src="../../assets/images/er/bell-blue.png" ></div>
							<div class="an-text">人员类型统计</div>
						</div>
						<div class="flex_bd">
							<ul class="ana-data flex-center">
								<li class="flex-col">
									<div class="value">500</div>
									<div class="text">路人</div>
								</li>
								<li class="line"></li>
								<li class="flex-col">
									<div class="value">360</div>
									<div class="text">工作人员</div>
								</li>
								<li class="line"></li>
								<li class="flex-col">
									<div class="value">500</div>
									<div class="text">路人</div>
								</li>
							</ul>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="ana-card flex-center">
						<div class="ana-left ana-red-left">
							<div class="an-icon"><img src="../../assets/images/er/bell-red.png" ></div>
							<div class="an-text">重点关注人员</div>
						</div>
						<div class="flex_bd">
							<el-row :gutter="16">
								<el-col :span="12">
									<div class="tk-cell flex-center">
										<div class="tk-bar">图库图</div>
										<div class="tk-pic"><img src="../../assets/images/er/tk.png" ></div>
										<div class="flex_bd">
											<div class="tk-progress">
												<el-progress :show-text="false" :width="80" :stroke-width="4" type="circle" color="#f34f55" :percentage="50" ></el-progress>
												<div class="tk-pv">
													<div class="tk-value">98%</div>
													<div class="tk-text">相似度</div>
												</div>
											</div>
										</div>
									</div>
								</el-col>
								<el-col :span="12">
									<div class="tk-cell flex-center">
										<div class="tk-bar">图库图</div>
										<div class="tk-pic"><img src="../../assets/images/er/tk.png" ></div>
										<div class="flex_bd">
											<div class="item">位置：东门出口</div>
											<div class="item">日期：2021-10-10</div>
											<div class="item">时间：18:25:50</div>
											<div class="item">事件：<span class="text-red">重点关注人员</span></div>
											<div class="item">姓名：张三</div>
										</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<!-- list -->
		<div class="handle-cells">
			<ul class="handle-list clear">
				<li v-for="(item,index) in handleList" :key="index">
					<el-popover
						placement="right"
						width="400"
						trigger="click">
						<div class="handle-detail">
							<div class="handle-t">任务详情</div>
							<div class="handle-cont">
								<div class="h-cell flex-center">
									<img src="../../assets/images/er/pic4.png" class="avatar" >
									<div class="flex_bd">
										<div class="h-name">张三</div>
										<div class="h-item">2021-4-4</div>
									</div>
								</div>
								<div class="h-desc">张三任务东门出口详情小区东门出口社区户主</div>
								<div class="h-items">
									<div class="h-item">任务标题任务标题任务标题任务标题</div>
									<div class="h-item">任务标题任务标题任务标题任务标题</div>
								</div>
								<div class="h-items">
									<div class="h-item"><span class="hd">截止时间：</span>2021-4-4</div>
									<div class="h-item"><span class="hd">提醒：</span>任务标题任务标题</div>
								</div>
							</div>
						</div>
						<div class="handle-list-card" slot="reference">
							<div class="ha-head flex-center">
								<img src="../../assets/images/er/sxt.png" ><span>XXXXXXX小区东门出口</span>
							</div>
							<div class="ha-body flex-center">
								<div class="ha-pic">
									<img :src="item.pic" >
								</div>
								<div class="flex_bd">
									<div class="item">位置：东门出口</div>
									<div class="item">日期：2021-10-10</div>
									<div class="item">时间：18:25:50</div>
									<div class="item">事件：社区户主</div>
									<div class="item">姓名：张三</div>
								</div>
							</div>
						</div>
					</el-popover>
					
				</li>
			</ul>
			<div class="pagination-foot flex-center">
				<el-pagination
					background
					layout="prev, pager, next"
					:total="1000">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				styleV: "1",
				filshow: 10000,
				filstyles: [{
						title: '全部',
						value: '1',
					},
					{
						title: '类目一',
						value: '2',
					},
					{
						title: '类目二',
						value: '3',
					},
					{
						title: '类目三',
						value: '4',
					},
					{
						title: '类目四',
						value: '5',
					},
					{
						title: '类目五',
						value: '6',
					},
					{
						title: '类目六',
						value: '7',
					},
					{
						title: '类目七',
						value: '8',
					},
					{
						title: '类目八',
						value: '9',
					},
					{
						title: '类目九',
						value: '10',
					},
					{
						title: '类目十',
						value: '11',
					},
					{
						title: '类目十一',
						value: '12',
					},
					{
						title: '类目十二',
						value: '13',
					},
				],
				form: {
					author: '1',
					raty: '1',
				},
				handleData: [{
						text:'线索',
						value:'13',
						icon: require('../../assets/images/er/kmenu-1.png')
					},{
						text:'公海客户',
						value:'13',
						icon: require('../../assets/images/er/kmenu-2.png')
					},{
						text:'潜在客户',
						value:'13',
						icon: require('../../assets/images/er/kmenu-3.png')
					},{
						text:'意向客户',
						value:'13',
						icon: require('../../assets/images/er/kmenu-4.png')
					},{
						text:'成交客户',
						value:'13',
						icon: require('../../assets/images/er/kmenu-5.png')
					},{
						text:'无效客户',
						value:'13',
						icon: require('../../assets/images/er/kmenu-6.png')
					},{
						text:'线索',
						value:'13',
						icon: require('../../assets/images/er/kmenu-7.png')
					},{
						text:'线索',
						value:'13',
						icon: require('../../assets/images/er/kmenu-8.png')
					},{
						text:'线索',
						value:'13',
						icon: require('../../assets/images/er/kmenu-9.png')
					},{
						text:'线索',
						value:'13',
						icon: require('../../assets/images/er/kmenu-10.png')
					},{
						text:'线索',
						value:'13',
						icon: require('../../assets/images/er/kmenu-11.png')
					},{
						text:'线索',
						value:'13',
						icon: require('../../assets/images/er/kmenu-12.png')
					},
				],handleList: [{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/tk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},{
						title:'XXXXXXX小区东门出口',
						pic: require('../../assets/images/er/mk.png')
					},
				],
				dataActive:0,
				bg: require('../../assets/images/bg4.jpg'),
				skin: "skin3"
			}
		},
		mounted() {},
		methods: {
			dataTab(index){
				this.dataActive = index
			},
			getData(data1, data2) {
				this.bg = data1
				this.skin = data2
			},
			change(e) {
				console.log(e)
			},
			
			filToggle() {
				if (this.filshow == 10) {
					this.filshow = 10000
				} else {
					this.filshow = 10
				}
			},
	}
}
</script>
